<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 定义一个动画 */
			@keyframes move{
				0%{
					transform: translate(0,0);
				}
				50%{
					transform: translateX(100px);
				}
				75%{
					transform:translateY(100px) ;
				}
				100%{
					transform: translate(0,0);
				}
			}
			.ad{
				width: 400px;
				height: 200px;
				background-color: #0000ff;
				border: 1px solid #000;
				margin: 50px;
				animation-name: move;
				animation-duration: 5s;
				 
				
				transform: translateX(50%);
				background: url(./ad.jpg)no-repeat center;
				/* 过渡 */
				transition: all 0.3s; 
			}
			.ad:hover{
				/* transform: scale(1.5); */
				overflow: hidden;
			}
			.close{
				position: absolute;
				top: 0px;
				right: 0px;
				width: 15px;
				line-height: 15px;
				text-align: center;
				height: 15px;
				border: 1px solid #ff0000;
				cursor: pointer;
			}
		</style>
		
	</head>
	<body>
		<div class="ad">
			<div class="close">x</div>
		</div>
		<div class="ad">
			<div class="close">x</div>
		</div>
		<div class="ad">
			<div class="close">x</div>
		</div>
		<script>
		// 	// 获取元素
		// const close=document.querySelector('.close');
		// // 获取ad元素
		// // const ad = document.querySelector('.ad');
		// //为close对象注册监听事件
		// close.addEventListener('click',function(){
		// 	// 这里点击关闭是关闭整个大盒子ad,所以使用的是ad.style.display,注意这里后面是一个字符串
		// 	// parentNode是指的是close的父元素
		// 	this.parentNode.style.display='none';
		// })
		const close= document.querySelectorAll('.close');
		console.log(close);
		for(let i=0;i<close.length;i++)
		{
			// this.parentNode.style.display='none';
			// 为close注册click事件
			close[i].addEventListener('click',function(){
				this.parentNode.style.display='none';
			})
		}
		</script>
	</body>
</html>